<template>
  <div class="index-draggable" ref="indexDraggable" style="padding: 10px;">
    <div>
      <div style="font-size: 12px;font-weight: 700;color: rgb(153, 153, 153);margin-bottom: 5px;">维度</div>
      <draggable v-model="myArray" group="field" v-bind="{ animation: 300 }">
        <div v-for="element in myArray" :key="element.id" style="background-color: #4c91fe;border-radius: 26px;text-align: center;color: #fff;margin-bottom: 5px;font-size: 12px;line-height: 26px;" class="item">{{element.name}}</div>
      </draggable>
      <div style="border: 1px dashed rgb(218, 218, 218);border-radius: 26px;text-align: center;font-size: 12px;line-height: 24px;color: rgb(153, 153, 153);" ref="dragZone">拖入维度字段</div>
    </div>
    <div style="margin-top: 10px;">
      <div style="font-size: 12px;font-weight: 700;color: rgb(153, 153, 153);margin-bottom: 5px;">度量</div>
      <draggable v-model="temArray" group="measurement" v-bind="{ animation: 300, handle: '.move' }">
        <div v-for="(element, index) in temArray" :key="index" style="background-color: rgb(251, 251, 251);border: 1px dashed rgb(218, 218, 218);margin: 10px 0;">
          <div style="line-height: 30px;padding: 0 2px;">
            <i class="el-icon-s-operation move" style="color: rgb(153, 153, 153);"></i>
          </div>
          <draggable v-model="temArray[index]" v-bind="{ animation: 300 }">
            <div v-for="item in element" :key="item.id" style="background-color: rgb(115, 203, 144);border-radius: 26px;text-align: center;color: #fff;margin-bottom: 5px;font-size: 12px;line-height: 26px;margin: 5px 10px;" class="item">{{ item.name }}</div>
          </draggable>
          <div style="border: 1px dashed rgb(218, 218, 218);border-radius: 26px;text-align: center;font-size: 12px;line-height: 24px;color: rgb(153, 153, 153);margin: 5px 10px 10px;background-color: #fff;" ref="dimensionZone">拖入对比维度字段</div>
        </div>
      </draggable>
      <div style="border: 1px dashed rgb(218, 218, 218);border-radius: 26px;text-align: center;font-size: 12px;line-height: 24px;color: rgb(153, 153, 153);" ref="measurementZone">拖入度量字段</div>
    </div>
    <div style="margin-top: 10px;">
      <div style="font-size: 12px;font-weight: 700;color: rgb(153, 153, 153);margin-bottom: 5px;">过滤器</div>
      <div style="background-color: rgb(251, 251, 251);border: 1px dashed rgb(218, 218, 218);padding: 14px 10px;" ref="filterZone">
        <div style="font-size: 12px;color: rgb(153, 153, 153);text-align: center;line-height: 50px;">拖入字段或指标</div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'IndexDraggable',
  components: {
    draggable
  },
  data () {
    return {
      myArray: [
        // {
        //   id: 0,
        //   name: '0'
        // },
        // {
        //   id: 1,
        //   name: '1'
        // }
      ],
      temArray: [
        // [
        //   {
        //     id: 0,
        //     name: '0'
        //   },
        //   {
        //     id: 1,
        //     name: '1'
        //   }
        // ],
        // [
        //   {
        //     id: 2,
        //     name: '2'
        //   },
        //   {
        //     id: 3,
        //     name: '3'
        //   }
        // ]
      ]
    }
  },
  mounted () {
    this.$refs.indexDraggable.addEventListener('drop', e => {
      // console.log(e.dataTransfer.getData('text/plain'))
    })
  },
  methods: {
    
  }
}
</script>

<style lang="less" scoped>
.item {
  &:hover {
    cursor: move;
  }
}
.move {
  cursor: move;
}
</style>
